<!-- 支付统计报表 -->
<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="130"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
      @handleChange="handleSearchChange"
      :isCheckbox="true"
      :isNeedTree="true"
      :paramName="paramName"
      @setSelectedNode="setSelectedNode"
    ></search-header>

    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table
          :sortColumn="notFormatColumn"
          :orderType="sortType"
          :fixed-cols="fixedCols"
          :is-reset-table="isResetTable"
          :theads-info="theadsInfo"
          :tbodys-info="tbodysInfo"
          @handleMultiCheck="handleMultiCheck"
          @handleSortColumn="handleSortColumn"
          @searchFn="getList"
          @getNextPage="getNextPage"
        >
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a
              class="ake_btn ake_btn_text"
              v-if="isPermmited('REPORT:PAYMENT:EXPORT')"
              @click.prevent="exportData()"
            >导出</a>
            <a
              class="ake_btn ake_btn_text"
              @click.prevent="reBuild()"
              v-if="isPermmited('REPORT:PAYMENT:REBUILD')"
            >重新生成</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30">
                  <template slot-scope="scope">
                    <span v-if="item.prop=='originOtherCount' || item.prop=='originOtherAmount'">
                      <a class="imgLink" @click="openOriginOther(scope.row,'origin_other_modal')">查看</a>
                    </span>
                    <span v-else-if="item.prop=='modeOtherCount' || item.prop=='modeOtherAmount'">
                      <a class="imgLink" @click="openModeOther(scope.row,'mode_other_modal')">查看</a>
                    </span>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>

            <el-table-column
              v-else
              :fixed="props.fixed"
              :label="props.label"
              :min-width="props.minWidth"
              :width="props.width"
              :prop="props.prop"
              :sortable="props.sortable"
            >
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop && scope.$index==0">合计</span>
                <span v-else-if="'reno' == props.prop && scope.$index!=0">{{ scope.$index }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>

          <!--操作列内的按钮-->
          <!-- <template slot="operateCell" slot-scope="props">
                    <el-table-column :fixed="props.fixed" :label="props.label" min-width="130">
                        <template slot-scope="scope">
                            <el-button title="确认收款" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_green" icon="circle-check" v-if="isPermmited('REPORT:PAY:CONFIRM_CHARGE') && scope.row.status=='FINISH_PAY'" @click="confirmOnlineReceipts(scope.row)"></el-button>
                        </template>
                    </el-table-column>
          </template>-->
        </multi-fun-table>

        <!---->
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="origin_other_modal" static="true" width="700" customeClass="mode-other-modal">
      <h3 slot="title">其他支付来源详情</h3>
      <div class="ModalBody" slot="modal-body">
        <div class="tableDetial">
          <el-table :data="originOtherData.list" border style="width: 100%" fit>
            <el-table-column type="index" label="序号" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="支付来源" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="count" label="次数(百分比)" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="金额(百分比)" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="closed('origin_other_modal')"
        >确定</button>
      </div>
    </basic-modal>

    <basic-modal ref="mode_other_modal" static="true" width="700" customeClass="mode-other-modal">
      <h3 slot="title">其他支付方式详情</h3>
      <div class="ModalBody" slot="modal-body">
        <div class="tableDetial">
          <el-table :data="modeOtherData.list" border style="width: 100%;" fit>
            <el-table-column type="index" label="序号" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="name" label="支付方式" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="count" label="次数(百分比)" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column prop="amount" label="金额(百分比)" show-overflow-tooltip></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text ake_btn_confirm" @click="closed('mode_other_modal')">确定</button>
      </div>
    </basic-modal>

    <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

// 引进vue的js
import payment_report from "./js/payment_report.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";

export default {
  name: "reportPayment",
  mixins: [common, stardardList, invokeModal, payment_report],
  components: {
    ReBuildBtn: ReBuildBtn
  },
  data() {
    var today = [
      new Date(
        moment()
          .subtract("days", 1)
          .format("YYYY-MM-DD 00:00:00")
      ),
      new Date(
        moment()
          .subtract("days", 1)
          .format("YYYY-MM-DD 23:59:59")
      )
    ]; //昨天
    return {
      reqUrl: "/report/payment/reStatReport.do",
      timeDimensionList: [
        { name: "日报", value: "date" },
        { name: "月报", value: "month" }
      ],
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: true,
          type: "select",
          name: "reportDimension",
          text: "时间维度",
          value: "day",
          isHandleChange: true,
          options: [
            { name: "日报", value: "day" },
            { name: "月报", value: "month" },
            { name: "年报", value: "year" },
            { name: "自定义", value: "custom" }
          ]
        },
        {
          index: 1,
          format: "yyyy-MM-dd",
          isShow: true,
          type: "datePicker",
          pickerType: "daterange",
          name: "dateFromTo",
          propName: "reportDateFrom,reportDateTo",
          text: "日期",
          value: today,
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "reportDateStr",
          text: "日期"
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场"
        },
        {
          index: 3,
          isShow: false,
          prop: "",
          text: "交易汇总",
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "totalCount",
              text: "总次数"
            },
            {
              index: 1,
              isShow: false,
              prop: "totalAmount",
              text: "总金额"
            }
          ]
        },
        {
          index: 4,
          isShow: false,
          prop: "",
          text: "支付来源（次数）",
          // minWidth: 110,
          isMultiHeader: true,
          initHidden: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "originGateCountStr",
              text: "出入口"
            },
            {
              index: 1,
              isShow: false,
              prop: "originCenterCountStr",
              text: "中央缴费处"
            },
            {
              index: 2,
              isShow: false,
              prop: "originSelfServiceCountStr",
              text: "自助缴费机"
            },
            {
              index: 3,
              isShow: false,
              prop: "originWeixinCountStr",
              text: "微信"
            },
            {
              index: 4,
              isShow: false,
              prop: "originAlipayCountStr",
              text: "支付宝"
            },
            {
              index: 5,
              isShow: false,
              prop: "originOtherCount",
              text: "其它"
            }
          ]
        },
        {
          index: 5,
          isShow: false,
          prop: "",
          text: "支付来源（金额）",
          // minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "originGateAmountStr",
              text: "出入口"
            },
            {
              index: 1,
              isShow: false,
              prop: "originCenterAmountStr",
              text: "中央缴费处"
            },
            {
              index: 2,
              isShow: false,
              prop: "originSelfServiceAmountStr",
              text: "自助缴费机"
            },
            {
              index: 3,
              isShow: false,
              prop: "originWeixinAmountStr",
              text: "微信"
            },
            {
              index: 4,
              isShow: false,
              prop: "originAlipayAmountStr",
              text: "支付宝"
            },
            {
              index: 5,
              isShow: false,
              prop: "originOtherAmount",
              text: "其它"
            }
          ]
        },
        {
          index: 6,
          isShow: false,
          prop: "",
          text: "支付方式（次数）",
          // minWidth: 110,
          isMultiHeader: true,
          initHidden: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "modeCashCountStr",
              text: "现金"
            },
            {
              index: 1,
              isShow: false,
              prop: "modeWeixinCountStr",
              text: "微信"
            },
            {
              index: 2,
              isShow: false,
              prop: "modeAlipayCountStr",
              text: "支付宝"
            },
            {
              index: 3,
              isShow: false,
              prop: "modeWechatWithoutSenseCountStr",
              text: "微信无感支付"
            },
            {
              index: 4,
              isShow: false,
              prop: "modeAlipayWithoutSenseCountStr",
              text: "支付宝无感支付"
            },
            {
              index: 5,
              isShow: false,
              prop: "modeOtherCount",
              text: "其它"
            }
          ]
        },
        {
          index: 7,
          isShow: false,
          prop: "",
          text: "支付方式（金额）",
          // minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "modeCashAmountStr",
              text: "现金"
            },
            {
              index: 1,
              isShow: false,
              prop: "modeWeixinAmountStr",
              text: "微信"
            },
            {
              index: 2,
              isShow: false,
              prop: "modeAlipayAmountStr",
              text: "支付宝"
            },
            {
              index: 3,
              isShow: false,
              prop: "modeWechatWithoutSenseAmountStr",
              text: "微信无感支付"
            },
            {
              index: 4,
              isShow: false,
              prop: "modeAlipayWithoutSenseAmountStr",
              text: "支付宝无感支付"
            },
            {
              index: 5,
              isShow: false,
              prop: "modeOtherAmount",
              text: "其它"
            }
          ]
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.user-row-modal {
  .modal-body {
    min-height: 400px;
  }
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
.mode-other-modal {
  .modal-body {
    max-height: 400px;
    overflow-y: scroll;
  }
  .ModalBody {
    max-height: 400px;
    overflow-y: scroll;
  }
}
</style>